<template>
  <div style="width: 100%; height: 100%">

<!--    搜索区-->
    <vxe-form
      ref="formRef"
      :data="formData"
      size="small"
      @submit="submitEvent"
      @reset="resetEvent">

      <vxe-form-item title="查询" field="keyword" span="6" :item-render="{}">
        <template #default="params">
          <vxe-input v-model="formData.keyword" placeholder="姓名/岗位"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="年份" field="year" span="6" :item-render="{}">
        <template #default="params">
          <vxe-date-picker v-model="formData.year" type="year"></vxe-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item  span="6" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary" content="查询" :loading="loading"></vxe-button>
          <vxe-button type="reset" content="重置" :loading="loading"></vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>

<!--    表格区-->
    <div>
      <div style="">

        <div v-for="(item,index) in dataList1" :key="index" style="height: 300px;">
          <vxe-grid  v-bind="gridOptions" :data="item.list" class="my-table" >
            <template #toolbar_buttons>
              <!--            <BasicTitle >{{item.userName}}</BasicTitle>-->

<!--              <div style="margin: 0 auto">-->
<!--                <span style="font-weight: bold">{{item.userName}}</span>  <span style="margin-left: 15px">({{item.postRoleName}})</span>-->

<!--              </div>-->
            </template>
            <template #tool_ref>
            </template>
          </vxe-grid>
        </div>
<!--        <div style="width: 48%;margin-left: 10px;">-->
<!--          <div v-for="(item,index) in dataList2" :key="index" style="height: 330px;">-->
<!--            <vxe-grid  v-bind="gridOptions" :data="item.list" class="my-table" >-->
<!--              <template #toolbar_buttons>-->
<!--                &lt;!&ndash;            <BasicTitle >{{item.userName}}</BasicTitle>&ndash;&gt;-->

<!--                <div style="margin: 0 auto">-->
<!--                  <span style="font-weight: bold">{{item.userName}}</span>  <span style="margin-left: 15px">({{item.postRoleName}})</span>-->

<!--                </div>-->
<!--              </template>-->
<!--              <template #tool_ref>-->
<!--              </template>-->
<!--            </vxe-grid>-->
<!--          </div>-->
<!--        </div>-->

      </div>


    </div>


  </div>
</template>
<script lang="ts" setup>
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
  VxeTableDefines,
} from '@/components/VxeTable';

import { BasicTable, useTable, TableAction } from '@/components/Table';
import { qualifiedList } from '@/api/sys/sysData';
import { useDrawer } from '@/components/Drawer';
import { BasicTitle } from '/@/components/Basic/index';
import util from '@/utils/util';

import {onMounted, reactive, ref} from 'vue';

import { useMessage } from "@/hooks/web/useMessage";
import {Button, Modal,Card,CardGrid} from 'ant-design-vue';
import { useGo } from "@/hooks/web/usePage";
import {vxeTableColumns} from "./role.data";

const go = useGo();

defineOptions({ name: 'ywDeptList' });
const { createMessage } = useMessage();

// const [register, { openModal, closeModal }] = useModal();
const [register, { openDrawer,closeDrawer }] = useDrawer();

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  mergeCells: [
    { row: 0, col: 0, rowspan: 7, colspan: 0 },
  ],
  columns: vxeTableColumns,
  filterConfig: {
    remote: true,
  },
  toolbarConfig: {
    enabled: false,
    slots: {
      buttons: 'toolbar_buttons',
      tools:'tool_ref'
    },
  },
  formConfig: {
    enabled: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    enabled: false,
  },
});


const loading=ref(false);
const msgList = ref([]);
const dataList1=ref([]);
const dataList2=ref([]);

const applyViewShow = ref(false);

const tableRef = ref<VxeGridInstance>();

const formData=ref({
  year:util.times("year")+"-01-01"
});

function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
  let json = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      json[field + 'Like'] = value;
    });
  }
  // console.log("----json:", json);
  // ywApproveList xftList
  return qualifiedList({
    page: page.currentPage,
    pageSize: page.pageSize,
    ...form,
    ...json,
  });
}


function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
  });
}

onMounted(() => {
  // dd.ready(function() {
  //
  // }
  qualifiedListFn(null);
})


function handleEdit(record: Recordable) {
  record.isUpdate=true;
  openDrawer(true, record);

}



function handleDelete(record: Recordable) {
}



function submitEvent({data}) {
  console.log("--submitEvent:",data);
  qualifiedListFn(data);
}
function resetEvent(e){
  qualifiedListFn(null);
}


function qualifiedListFn(data){
  loading.value = true;
  qualifiedList(data).then((res) => {
    if (res.code === 200) {
      dataList1.value= res.data;
      // if(arr&&arr.length>0) {
      //   const middle = Math.ceil(arr.length / 2);
      //   let a1=arr.slice(0, middle);
      //   let a2=arr.slice(middle);
      //   dataList1.value =a1;
      //   dataList2.value =a2;
      // }
    }else{
      createMessage.error(res.message);
    }
  }).finally(() => {
    loading.value = false;
  })
}

</script>
<style lang="less">
.my-table{
  //width: 40%;
  margin-bottom: 5px;
  margin-top: 5px;
}
</style>
